<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="yes" name="apple-touch-fullscreen" />
    <meta content="telephone=no,email=no" name="format-detection" />
    <script src="./flex.js"></script>
    <title>背包礼物兑换</title>
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <div class="banner">
      <img src="./images/bg@2x.png" width="100%" alt="" />
    </div>
    <div class="desc">
      <div class="empty">
        <p class="empty-desc">您的背包还没有礼物哦，</p>
        <p class="empty-desc">去派对砸蛋或开箱子吧~</p>
      </div>
      <div class="solid">
        <p class="empty-desc">您的背包礼物可兑换钻石</p>
        <p class="empty-desc diamond">55434565<sub class="sub">钻</sub></p>
      </div>
    </div>
    <div class="has-gift">
      <div class="tie-box">
        <div class="tie left"></div>
        <div class="tie right"></div>
      </div>
      <div class="gift-box">
        <p class="gift-title">我的背包</p>
        <div class="gift-list">
          <!-- <div>
          <div class="gift-img">
          </div>
          <p class="gift-name">香蕉 x <span class="gift-number" id="gift-name-1"> 10</span></p>
          <div class="op-box">
            <div class="minus-btn" onclick="minus(this)">
              <img src="./images/minus@2x.png" height="100%" alt="">
            </div>
            <div class="tt">
              <input class="input-box" data-id='1' value="1" id="gift-1" oninput="listenInput(this,1)"/>
            </div>
            <div class="plus-btn" onclick="plus(this)">
              <img src="./images/plus@2x.png" height="100%" alt="">
            </div>
          </div>
          <div class="exchange-btn" onclick="toExchange(this)">兑换</div>
        </div> -->
        </div>
        <div
          class="one-key-exchange-btn"
          onclick="showTip('info','确定兑换全部的背包礼物?')"
        >
          兑换全部礼物
        </div>
      </div>
    </div>

    <div class="go-btn hide no-gift" onclick="goRoom()">
      <img src="./images/go@2x.png" alt="" width="100%" />
    </div>

    <div class="tip success">
      <p class="title">兑换成功</p>
      <p class="message">可前往我的钱包</p>
      <p class="message">查看钻石到账情况</p>

      <div class="btn-group">
        <div>
          <div class="btn cancel" onclick="hideTip()">取消</div>
        </div>
        <div>
          <div class="btn success" onclick="oneKeyExchange()">确定</div>
        </div>
      </div>
    </div>

    <!-- 遮罩层 -->
    <div class="overlay" onclick="hideTip()"></div>
    <!-- end -->
  </body>
  <script src="./base.js"></script>
  <script src="./tool.js"></script>

  <script>
    var baseUrl = 'https://sl-api.bianxiangapp.com:8866'
    // var baseUrl = 'http://47.100.52.89' // 测试服
    var room_id = 0
    document.getElementsByClassName('has-gift')[0].style.display = 'none'
    document.getElementsByClassName('no-gift')[0].style.display = 'block'
    document.getElementsByClassName('empty')[0].style.display = 'block'
    document.getElementsByClassName('solid')[0].style.display = 'none'

    function giftList(res) {
      try {
        res = parseBase64(res)
        var data = res.data.list
        var data = data.filter((value) => {
          return value.price > 0;
        });
        room_id = res.data.room_id ? res.data.room_id : 0
        var len = data.length
        var total_price = 0
        document.getElementsByClassName('gift-list')[0].innerHTML = ''
        if (len > 0) {
          for (var i = 0; i < len; i++) {
              var divOuterElem = document.createElement('div')

              var giftImgElem = document.createElement('div')
              giftImgElem.setAttribute('class', 'gift-img')
              var imgElem = document.createElement('img')
              imgElem.setAttribute('src', data[i].image)
              imgElem.setAttribute('width', '100%')
              giftImgElem.appendChild(imgElem)
              divOuterElem.appendChild(giftImgElem)

              var giftNameElem = document.createElement('p')
              giftNameElem.textContent = data[i].name + ' x '
              giftNameElem.setAttribute('class', 'gift-name')
              var giftNumberElem = document.createElement('span')
              giftNumberElem.setAttribute('id', 'gift-name-' + data[i].gift_id)
              giftNumberElem.textContent = data[i].avail
              giftNumberElem.setAttribute('class', 'gift-number')
              giftNameElem.appendChild(giftNumberElem)
              divOuterElem.appendChild(giftNameElem)

              var opBoxElem = document.createElement('div')
              opBoxElem.setAttribute('class', 'op-box')
              var minusBtnElem = document.createElement('div')
              minusBtnElem.setAttribute('class', 'minus-btn')
              minusBtnElem.setAttribute(
                'onclick',
                'minus(this,' + data[i].gift_id + ')'
              )
              var imgElem = document.createElement('img')
              imgElem.setAttribute('src', './images/minus@2x.png')
              imgElem.setAttribute('height', '100%')
              minusBtnElem.appendChild(imgElem)
              opBoxElem.appendChild(minusBtnElem)

              var inputBoxOuterElem = document.createElement('div')
              var inputBoxElem = document.createElement('input')
              inputBoxElem.setAttribute('class', 'input-box')

              inputBoxElem.setAttribute('id', 'gift-' + data[i].gift_id)
              inputBoxElem.setAttribute(
                'oninput',
                'listenInput(this,' + data[i].gift_id + ')'
              )
              var avail = data[i].avail ? 1 : 0

              sessionStorage.setItem('temp:' + data[i].gift_id, data[i].avail)
              sessionStorage.setItem('dynamic:' + data[i].gift_id, 0)

              inputBoxElem.value = 0
              inputBoxOuterElem.appendChild(inputBoxElem)
              opBoxElem.appendChild(inputBoxOuterElem)

              var plusBtnElem = document.createElement('div')
              plusBtnElem.setAttribute('class', 'plus-btn')
              plusBtnElem.setAttribute(
                'onclick',
                'plus(this, ' + data[i].gift_id + ')'
              )
              var imgElem = document.createElement('img')
              imgElem.setAttribute('src', './images/plus@2x.png')
              imgElem.setAttribute('height', '100%')
              plusBtnElem.appendChild(imgElem)
              opBoxElem.appendChild(plusBtnElem)
              divOuterElem.appendChild(opBoxElem)

              var exchangeBtnElem = document.createElement('div')
              exchangeBtnElem.setAttribute('class', 'exchange-btn')
              exchangeBtnElem.setAttribute(
                'onclick',
                'max(this,' + data[i].gift_id + ')'
              )
              exchangeBtnElem.textContent = 'MAX'
              divOuterElem.appendChild(exchangeBtnElem)

              var exchangeBtnElem = document.createElement('div')
              exchangeBtnElem.setAttribute('class', 'exchange-btn')
              exchangeBtnElem.setAttribute(
                'onclick',
                'toExchange(this,' + data[i].gift_id + ')'
              )
              exchangeBtnElem.textContent = '兑换'
              divOuterElem.appendChild(exchangeBtnElem)

              document
                .getElementsByClassName('gift-list')[0]
                .appendChild(divOuterElem)

              total_price += data[i].price * data[i].avail

          }

          document.getElementsByClassName(
            'diamond'
          )[0].textContent = Math.floor(total_price * 1)

          document.getElementsByClassName('has-gift')[0].style.display = 'block'
          document.getElementsByClassName('no-gift')[0].style.display = 'none'
          document.getElementsByClassName('empty')[0].style.display = 'none'
          document.getElementsByClassName('solid')[0].style.display = 'block'
        } else {
          document.getElementsByClassName('has-gift')[0].style.display = 'none'
          document.getElementsByClassName('no-gift')[0].style.display = 'block'
          document.getElementsByClassName('empty')[0].style.display = 'block'
          document.getElementsByClassName('solid')[0].style.display = 'none'
        }
      } catch (err) {
        alert(err)
      }
    }

    // 相加
    function plus(obj, id) {
      var inputObj = document.getElementById('gift-' + id)
      var number = inputObj.value
      var temp_number = sessionStorage.getItem('temp:' + id)
      if (parseInt(number) < parseInt(temp_number)) {
        inputObj.value++
        document.getElementById('gift-name-' + id).textContent--
        sessionStorage.setItem('dynamic:' + id, inputObj.value)
      }
    }

    // 相减
    function minus(obj, id) {
      var inputObj = document.getElementById('gift-' + id)
      var number = inputObj.value
      if (number > 0) {
        inputObj.value--
        document.getElementById('gift-name-' + id).textContent++
        sessionStorage.setItem('dynamic:' + id, inputObj.value)
      }
    }

    //max
    function max(obj, id) {
      var inputObj = document.getElementById('gift-' + id)
      var number = inputObj.value
      var temp_number = sessionStorage.getItem('temp:' + id)
      if (parseInt(number) < parseInt(temp_number)) {
        inputObj.value = temp_number
        document.getElementById('gift-name-' + id).textContent = 0
        sessionStorage.setItem('dynamic:' + id, inputObj.value)
      }
    }
    function getNearEle(ele, type) {
      type = type == 1 ? 'previousSibling' : 'nextSibling'
      var nearEle = ele[type]
      while (nearEle) {
        if (nearEle.nodeType === 1) {
          return nearEle
        }
        nearEle = nearEle[type]
        if (!nearEle) {
          break
        }
      }
      return null
    }
    /**
     * 获取当前执行对象的上一个元素
     */
    function prev() {
      return getNearEle(this, 1)
    }
    /**
     * 获取当前执行对象的下一个元素
     */
    function next() {
      return getNearEle(this, 0)
    }

    function getList() {
      kk.post(baseUrl + '/gift_bag/list', {}, 'giftList')
      // kk.ajaxPost(baseUrl + '/gift_bag/list', {}, function(res) {
      //   giftList(res)
      // })
    }

    function toExchangeCallback(res) {
      res = parseBase64(res)
      if (res.code == 0) {
        // var temp_number = sessionStorage.getItem('temp:' + temp_gift_id);
        // var number = sessionStorage.getItem('dynamic:' + temp_gift_id);
        // if(temp_number >= number) {
        //   temp_number = temp_number - number;
        //   var avail = temp_number ? 1 : 0;
        //   document.getElementById('gift-'+temp_gift_id).value = 0;
        //   sessionStorage.setItem('temp:'+temp_gift_id, temp_number);
        //   sessionStorage.setItem('dynamic:' + temp_gift_id, 0);
        // }
        getList()
        showTip('success')
      } else {
        showTip('error', '兑换失败')
      }
    }

    var temp_gift_id = null
    function toExchange(obj, id) {
      temp_gift_id = id
      var url = baseUrl + '/gift_bag/exchange_diamond'
      var gift_num = document.getElementById('gift-' + id).value
      var data = {
        type: 0,
        gift_id: id,
        gift_num: gift_num
      }
      var callback = 'toExchangeCallback'
      if (gift_num <= 0) {
        showTip('error', '请输入要兑换的礼物数量')
        return
      }
      kk.post(url, data, callback)
      // kk.ajaxPost(baseUrl + '/gift_bag/exchange_diamond', data, function(res) {
      //   toExchangeCallback(res)
      // })
    }

    function oneKeyExchangeCallback(res) {
      res = parseBase64(res)
      if (res.code == 0) {
        getList()
        showTip('success')
      } else {
        showTip('error', '兑换失败')
      }
    }

    function oneKeyExchange() {
      var url = baseUrl + '/gift_bag/exchange_diamond'
      var data = {
        type: 1
      }
      var callback = 'oneKeyExchangeCallback'
      kk.post(url, data, callback)
    }
    function parseBase64(res) {
      res = CryptoJS.enc.Base64.parse(res)
      result = res.toString(CryptoJS.enc.Utf8)
      result = eval('(' + result + ')')
      return result
    }

    function showTip(type, msg) {
      if (type === 'success') {
        document.getElementsByClassName('title')[0].textContent = '兑换成功'
        document.getElementsByClassName('message')[0].textContent =
          '可前往我的钱包'
        document.getElementsByClassName('message')[1].style.display = 'block'
        document.getElementsByClassName('btn-group')[0].style.display = 'none'
      } else if (type === 'error') {
        document.getElementsByClassName('title')[0].textContent = '兑换失败'
        document.getElementsByClassName('message')[0].textContent = msg
          ? msg
          : '兑换失败'
        document.getElementsByClassName('message')[1].style.display = 'none'
        document.getElementsByClassName('btn-group')[0].style.display = 'none'
      } else if (type === 'info') {
        document.getElementsByClassName('title')[0].textContent = '兑换提示'
        document.getElementsByClassName('message')[0].textContent = msg
        document.getElementsByClassName('message')[1].style.display = 'none'
        document.getElementsByClassName('btn-group')[0].style.display = 'block'
      }
      document.getElementsByClassName('tip')[0].style.display = 'block'
      document.getElementsByClassName('overlay')[0].style.display = 'block'

      if (type === 'success' || type === 'error') {
        setTimeout(() => {
          hideTip()
        }, 3000)
      }
    }

    function hideTip() {
      document.getElementsByClassName('tip')[0].style.display = 'none'
      document.getElementsByClassName('overlay')[0].style.display = 'none'
    }
    sessionStorage.setItem('temp:1', 10)
    function listenInput(obj, id) {
      var inputObj = document.getElementById('gift-' + id)
      var number = inputObj.value

      var temp_number = sessionStorage.getItem('temp:' + id)

      if (isNaN(number) || number < 0) {
        showTip('error', '请输入正确的礼物兑换数量')
        return
      }

      if (parseInt(number) > parseInt(temp_number)) {
        showTip('error', '背包礼物数量不足')
        inputObj.value = temp_number
        document.getElementById('gift-name-' + id).textContent = 0
        return
      }

      if (number > 0) {
        var gift_name_obj = document.getElementById('gift-name-' + id)
        var name_number = gift_name_obj.textContent
        var t = Number(temp_number) - Number(number)
        gift_name_obj.textContent = t
        sessionStorage.setItem('dynamic:' + id, number)
      } else {
        document.getElementById('gift-name-' + id).textContent = temp_number
        sessionStorage.setItem('dynamic:' + id, 0)
      }
    }
    getList()

    function goRoom() {
      if (kk.isIos) {
        window.webkit.messageHandlers.roomClicked.postMessage({
          room_id: room_id
        })
      } else if (kk.isAndroid) {
        keke.roomClicked(room_id)
      }
    }
  </script>
</html>
